<template>
	<div class="tu">
      <h2>最新数据</h2>
		<div id="container" style="width: 100%; margin: 0 auto"></div>
	</div>
</template>

<script>
export default{
	data: function(){
		return {};
	}
}

$(document).ready(function() {  
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false,
       height: 250
   };
   var title = {
      text: '2017 年各区房屋市场占有比例'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '<b>{point.name}%</b>: {point.percentage:.1f} %'
         }
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
         ['甘井子区',   45.0],
         ['沙河口区',       26.8],
         {
            name: '金州区',
            y: 12.8,
            sliced: true,
            selected: true
         },
         ['旅顺口区',    8.5],
         ['开发区',     6.2],
         ['其他',   0.7]
      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});

</script>

<style>
.tu{
	box-sizing: border-box;
	width: 100%;
}
.tu h2{
   height: 30px;
   padding: 0px 10px;
   line-height: 30px;
   background: #ccc;
   font-size: 14px;
}
.tu #container{
   padding: 10px;
}
</style>